<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
	    <meta name="apple-mobile-web-app-capable" content="yes" />
	    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
	    <meta name="format-detection" content="telephone=no" />
	    <meta http-equiv="Cache-Control" content="must-revalidate,no-cache">
	    <meta http-equiv="x-dns-prefetch-control" content="on" />
	    <meta name="version" content="20170809">
		<title>忘记密码</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/logstyle.css"/>
		
		<script src="js/initRem.js"></script>
		<script src="js/jquery-2.1.4.min.js"></script>
		<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body class="w-forg">
		<div class="login">
			<div class="phone">
				<input type="text" name="phone" placeholder="请输入手机号" maxlength="11" id="phoneNum"/>
			</div>
			<div class="passcode">
				<div class="subCode" onclick="clickButton(this)">
					发送验证码
				</div>
				<input type="text" name="tel-code" placeholder="验证码" maxlength="8" id="scode"/>
			</div>
			<div class="passwd">
				<input type="password" name="password" placeholder="请输入新密码" maxlength="20" id="pass"/>
			</div>
			<div class="sub">
				<button id="btn">
					确认
				</button>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		//mui初始化
		mui.init({
			swipeBack: true //启用右滑关闭功能
		});
		$("#btn").click(function(){
		 	if(isEmpty(trim($("#phoneNum").val()))){
		 		mui.alert('请输入手机号码', '');
		 		return;
		 	}else if(!IsTel(trim($("#phoneNum").val()))){
		 		mui.alert('手机号码格式不正确', '');
		 		return;
		 	}else if(isEmpty(trim($("#scode").val()))){
		 		mui.alert('请输入验证码', '');
		 		return;
		 	}else if(isEmpty(trim($("#pass").val()))){
		 		mui.alert('请输入密码', '');
		 		return;
		 	}else{
		 		
		 	}
		 })
		var isTrue = false;
		function clickButton(obj){
			if(IsTel(trim($(".phone input").val()))){
				var obj = $(obj);
				if(isTrue == false){
					isTrue = true;
					var time = 60;
					obj.text(60+"(s)");
				    var set=setInterval(function(){
				    	obj.text(--time+"(s)");
				    }, 1000);/*等待时间*/
				    setTimeout(function(){
				    	obj.text("重新获取验证码");/*倒计时*/
				   		clearInterval(set);
				   		isTrue = false;
				    }, 60000);
				}else{
					mui.alert('验证码已发送,请稍后重试', '');
				}
			}else{
				if(isEmpty(trim($(".phone input").val()))){
		 			mui.alert('请输入手机号码', '');
			 		return;
			 	}else if(!IsTel(trim($(".phone input").val()))){
			 		mui.alert('手机号码格式不正确', '');
			 		return;
			 	}
			}
		}
		
		//验证手机号函数
		function IsTel(Tel){
	        var re=new RegExp(/^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/);
	        var retu=Tel.match(re);
	        if(retu){
	            return true;
	        }else{
	            return false;
	        }
	    };
	    //删除字符串左右两端的空格
	    function trim(str){ //删除左右两端的空格
	　　     return str.replace(/(^\s*)|(\s*$)/g, "");
	　　 }
	    //监测是否为空函数
		function isEmpty(str){
			if(trim(str).length == 0){
				return true;
			}
		}
	</script>
</html>